<template>
    <el-select
        v-model="formData[prop]"
        v-bind="$attrs"
        remote
        :remote-method="remoteMethod"
        :loading="loading"
        :placeholder="placeholder"
        :clearable="clearable"
        :filterable="filterable"
        :collapse-tags="collapseTags"
        :collapse-tags-tooltip="collapseTagsTooltip"
        @change="doChange"
    >
        <el-checkbox
            v-if="needSelectAll"
            :value="selectAll"
            style="padding-left: 20px"
            @change="doSelectAll"
            >全选</el-checkbox
        >
        <el-option
            v-for="(item, index) in newOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled || false"
        >
        </el-option>
    </el-select>
</template>

<script>
import { QueryHealthCheckupProjectSelectListAsyncApi } from '@/api/home'
import { ElMessage } from 'element-plus'

export default {
    props: {
        formData: {
            type: Object,
            default: () => ({})
        },
        needSelectAll: {
            type: Boolean,
            default: false
        },
        searchType: {
            type: String,
            default: ''
        },
        seleType: {
            type: Number,
            default: 0
        },
        sellCompanyIDX: {
            type: [Number, String],
            default: 0
        },
        options: {
            type: Array,
            default: () => []
        },
        prop: {
            type: String,
            default: ''
        },
        onChange: {
            type: [Function, undefined],
            default: undefined
        },
        onSelectAll: {
            type: [Function, undefined],
            default: undefined
        },
        params: {
            type: Object,
            default: () => {
                return {}
            }
        },
        placeholder: {
            type: String,
            default: '请选择'
        },
        clearable: {
            type: Boolean,
            default: true
        },
        filterable: {
            type: Boolean,
            default: true
        },
        collapseTags: {
            type: Boolean,
            default: true
        },
        collapseTagsTooltip: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        selectAll() {
            return (
                this.needSelectAll &&
                typeof this.formData[this.prop] === 'object' &&
                this.newOptions.every((i) =>
                    this.formData[this.prop].includes(i.value)
                )
            )
        }
    },
    watch: {
        options: {
            handler(newVal) {
                if (newVal) {
                    this.newOptions = newVal
                }
            },
            immediate: true,
            deep: true
        }
    },
    data() {
        return {
            loading: false,
            newOptions: []
        }
    },
    methods: {
        remoteMethod(keyword) {
            const self = this
            if (keyword && keyword.trim()) {
                // 查询供应商
                if (this.searchType === 'tjxmgz') {
                    self.loading = true
                    QueryHealthCheckupProjectSelectListAsyncApi({
                        keyword
                    })
                        .then((res) => {
                            self.loading = false
                            if (res.Code == '200' && res.Data) {
                                self.newOptions = res.Data.map(
                                    ({ id, text, ...item }) => {
                                        return {
                                            ...item,
                                            value: id,
                                            label: text,
                                            id,
                                            text
                                        }
                                    }
                                )
                            } else {
                                ElMessage.error(res.Message)
                            }
                        })
                        .catch((e) => {
                            self.loading = false
                            console.log(e)
                        })
                }
            }
        },
        doChange(e) {
            if (this.onChange) {
                this.onChange(e)
            }
        },
        doSelectAll(e) {
            const list = []
            if (e) {
                this.newOptions.forEach((i) => {
                    list.push(i.value)
                })
            }
            this.formData[this.prop] = list
            if (this.onSelectAll) {
                this.onSelectAll(e)
                return
            }
        }
    }
}
</script>

<style></style>
